<template>
  <a-form :label-col="{ md: { span: 6 }, sm: { span: 24 } }" :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }">
    <a-row :gutter="22">
      <a-col :lg="8" :md="12" :sm="24" :xs="24">
        <a-form-item label="客户" style="margin-bottom: 0;">
          <a-auto-complete v-model:value="where.customer_val" :options="customerOptions" placeholder="请输入客户名称"
            @select="customer_onSelect" @search="customer_onSearch" @blur="customer_blur" allow-clear />

        </a-form-item>
      </a-col>
      <a-col :lg="8" :md="12" :sm="24" :xs="24">
        <a-form-item label="提单号" style="margin-bottom: 0;">
          <a-input allow-clear size="small" v-model:value="where.billOfLading" placeholder="输入提单号搜索"
            prefix-icon="el-icon-search" style="height: 32px;" >
            <template #prefix>
              <search-outlined class="ele-text-placeholder" />
            </template>
          </a-input>
        </a-form-item>
      </a-col>
      <a-col :lg="8" :md="12" :sm="24" :xs="24">
        <a-form-item label="做箱时间" style="margin-bottom: 0;">
          <a-date-picker v-model:value="where.factoryPackDate" valueFormat="YYYY-MM" picker="month" placeholder="请输入对账日期"
            class="ele-fluid" style="height: 32px;" :allow-clear="false" />
        </a-form-item>
      </a-col>

    </a-row>
  </a-form>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';
import { SearchOutlined } from '@ant-design/icons-vue';

import dayjs from 'dayjs'
import { TIME_OUT } from '@/config/damon';

import { listCustomersSel } from '@/api/order/customer';

const emit = defineEmits(['search']);

// 搜索表单
const where = reactive({
  customer_val: '',
  customer: '',
  factoryPackDate: dayjs().subtract(1, 'month').format("YYYY-MM"),
});

/* 搜索 */
const search = () => {
  emit('search', where);
};


//防止重复刷新
//客户下拉列表
let customer_m_timeout = 0
const customerOptions = ref([]);
const customer_onSearch = searchText => {
  clearTimeout(customer_m_timeout)
  customer_m_timeout = setTimeout(() => {
    listCustomersSel({ 'name': searchText, type: '货代', keywords: 'salesman' }).then(msg => {
      customerOptions.value = msg
    }).catch((e) => {
    })
  }, TIME_OUT);
};
customer_onSearch()
const customer_onSelect = (value2, option2) => {
  // let a = customerOptions.value.find((item)=> {return item.value=value})
  where.customer_val = option2.label
  where.customer = option2.label
};
const customer_blur = () => {
  where.customer_val = where.customer
};
const customer_onSelect_s = (value2, option2) => {
  where.customer_val = option2.label
  where.customer = option2.label
};

let where_timeout = 0
watch(() => where, (val) => {
  clearTimeout(where_timeout)
  where_timeout = setTimeout(() => {
    search()
  }, TIME_OUT);
},
{ deep: true }
)
</script>
